<template>
  <view class="ver-layout">
    <!--  标题返回栏  -->
    <view class="back-title-layout hor-layout-center" :style="{opacity: titleOpacity}">
      <view class="back-view" @click="navBack">
        <i class="iconfont back-icon">&#xe8de;</i>
      </view>
      <view class="title-text">打卡记录</view>
    </view>
    <!--  头部信息栏  -->
    <view class="top-layout">
      <view class="title-layout hor-layout-center">
        <view class="back-view" @click="navBack">
          <i class="iconfont back-icon">&#xe8de;</i>
        </view>
        <view class="title-text">打卡记录</view>
      </view>
      <view class="top-content hor-layout">
        <image class="teacher-icon" src="@/static/home/ic_student_icon.png"/>
        <view class="content-info ver-layout">
          <view class="info-name">王可可</view>
          <view class="company-info hor-layout-side">
            <view>律动艺术培训机构</view>
            <view class="num">160</view>
          </view>
          <view class="infos-info hor-layout-side">
            <view>钢琴教师，女，24岁，17647585412</view>
            <view>学生</view>
          </view>
        </view>
      </view>
    </view>
    <!--  打卡统计  -->
    <view class="clock-in-box ver-layout-center">
      <view>您已连签到10天，请继续加油哦!</view>
      <view class="box-content hor-layout-center">
        <view class="box-item ver-layout-center">
          <view class="content-num">1</view>
          <view class="content-text">签到异常</view>
        </view>
        <view class="box-divider-line"></view>
        <view class="box-item ver-layout-center">
          <view class="content-num">10</view>
          <view class="content-text">签到天数</view>
        </view>
      </view>
    </view>
    <!-- 打卡日历 -->
    <view class="clock-in-calendar ver-layout-center">
      <view class="calender-title hor-layout-center">
        <u-icon name="play-left-fill" color="#333333" size="25" @click="getSideDate(-1)"></u-icon>
        <span class="calender-title-text">{{ dateObj.monthStr }}</span>
        <u-icon name="play-right-fill" color="#333333" size="25" @click="getSideDate(1)"></u-icon>
      </view>
      <view class="calender-line"></view>
      <view class="week-index-list hor-layout">
        <view class="week-index-title" v-for="(item,index) in weekIndex" :key="index">
          {{ item }}
        </view>
      </view>
      <view class="week-day-list flex-grid-layout">
        <view class="week-day-item" v-for="(item,index) in dateObj.weekDays" :key="index"
              :class="{'disabled':!item.show,'current':isCurrentDay(item)}">
          {{ item.num }}
        </view>
      </view>
    </view>
    <!--  打卡详情  -->
    <view class="clock-in-calendar hor-layout" style="margin-bottom: 20px">
      <view class="hint-line ver-layout-center">
        <view class="hint-point"></view>
        <view class="hint-line-view"></view>
        <view class="hint-point"></view>
      </view>
      <view class="clock-in-info ver-layout">
        <view class="info-title">迟到打卡
          <span class="info-title-time">(9:26)</span>
        </view>
        <view class="hor-layout info-item">
          <u-icon name="clock-fill" color="#666666"></u-icon>
          <view class="info-item-text">9:00</view>
        </view>
        <view class="hor-layout info-item">
          <u-icon name="map-fill" color="#666666"></u-icon>
          <view class="info-item-text">呼和浩特市赛罕区五三0三工厂内蒙古晨报社</view>
        </view>
        <view class="hor-layout info-item">
          <u-icon name="map-fill" color="#F72323"></u-icon>
          <view class="info-item-text">迟到</view>
        </view>
        <view class="info-title" style="margin-top: 18px">18:00 下班打卡</view>
      </view>
    </view>
  </view>
</template>

<script>
//todo 接口联调
import {formatDate, monthDays} from "@/common/common.js"

export default {
  name: "clockIn",
  data() {
    return {
      titleOpacity: 0,
      weekIndex: ['一', '二', '三', '四', '五', '六', '日'],
      dateObj: {
        dayStr: '',
        curDate: '',
        monthStr: '',
        weekDays: [],
      },
      currentDateStr: ''
    }
  },
  onLoad() {
    this.getSideDate()
    this.currentDateStr = formatDate(new Date(), 'yyyy-MM-d')
  },
  onPageScroll(e) {
    // console.log("onPageScroll", e)
    this.titleOpacity = e.scrollTop * 0.005
  },
  methods: {
    navBack() {
      this.$u.route({type: 'back'})
    },
    isCurrentDay(dayObj) {
      return dayObj.fullDate === this.currentDateStr
    },
    getSideDate(t = 0) {
      let {curDate, monthStr, dayStr, weekDays} = this.dateObj
      if (!curDate) curDate = new Date()
      curDate.setMonth(curDate.getMonth() + t)
      curDate.setDate(1)
      monthStr = formatDate(curDate, 'yyyy/MM')
      dayStr = formatDate(curDate, 'yyyy-MM-dd')
      weekDays = monthDays.getFullChunkDates(dayStr)
      this.dateObj = {curDate, monthStr, dayStr, weekDays}
    }
  }
}
</script>

<style>
page {
  background: #EFEFEF;
}

.back-title-layout {
  z-index: 1000;
  position: fixed;
  width: 100%;
  padding-top: var(--status-bar-height);
  height: calc(var(--status-bar-height) + 44px);
  background: #666D7A;
}

.top-layout {
  position: absolute;
  width: 100%;
  padding-top: var(--status-bar-height);
  height: calc(var(--status-bar-height) + 195px);
  background-image: linear-gradient(#F7DAE2, #C1AECA, #2E3352);
}

.title-layout {
  width: 100%;
  height: 44px;
}

.back-view {
  padding-left: 9px;
  padding-right: 9px;
}

.back-icon {
  color: white;
  font-size: 22px;
}

.title-text {
  width: 100%;
  margin-right: 44px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: white;
}

.top-content {
  margin-left: 20px;
  margin-right: 24px;
  margin-top: 13px;
}

.teacher-icon {
  width: 53px;
  height: 53px;
  border-radius: 50%;
}

.content-info {
  width: 100%;
  margin-left: 9px;
  color: white;
}

.info-name {
  font-size: 16px;
  line-height: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #F3F3F3;
}

.company-info {
  margin-top: 9px;
  font-size: 12px;
  line-height: 12px;
  font-family: Source Han Sans CN;
  color: #F3F3F3;
}

.company-info > .num {
  font-size: 18px;
}

.infos-info {
  margin-top: 11px;
  font-size: 12px;
  line-height: 12px;
  font-family: Source Han Sans CN;
  color: #F3F3F3;
}

.clock-in-box {
  z-index: 100;
  padding-top: 18px;
  padding-bottom: 18px;
  width: calc(100% - 24px);
  margin: 0px 12px;
  margin-top: 150px;
  background: #FFFFFF;
  border-radius: 12px;
}

.box-content {
  width: 100%;
  margin-top: 15px;
}

.box-item {
  flex: 1;
}

.box-divider-line {
  width: 2px;
  height: 67px;
  background: #EFEFEF;
}

.content-num {
  font-size: 25px;
  line-height: 25px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #333333;
}

.content-text {
  margin-top: 15px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
}

.clock-in-calendar {
  width: calc(100% - 24px);
  margin: 0px 12px;
  margin-top: 20px;
  padding: 18px 15px;
  background: #FFFFFF;
  border-radius: 12px;
}

.calender-title {
  font-size: 21px;
  line-height: 21px;
  font-family: Source Han Sans CN;
  color: #010101;
}

.calender-title-text {
  margin: 0px 42px;
}

.calender-line {
  margin-top: 15px;
  width: 284px;
  height: 3px;
  border-radius: 3px;
  background: lightgray;
}

.week-index-list {
  margin-top: 17px;
  width: 100%;
}

.week-index-title {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #8A857C;
}

.week-day-list {
  width: 100%;
  margin-top: 10px;
}

.week-day-item {
  height: 40px;
  line-height: 40px;
  width: calc(100% / 7);
  text-align: center;
  font-size: 16px;
  color: #292621;
  font-family: Source Han Sans CN;
}

.week-day-item.disabled {
  color: #999999;
}

.week-day-item.current {
  border-radius: 5px;
  background: #4cd964;
}

.clock-in-info {
  margin-left: 11px;
}

.hint-line {
  padding: 5px 0px;
}

.hint-point {
  width: 8px;
  height: 8px;
  border: 1px solid #F67562;
  border-radius: 50%;
}

.hint-line-view {
  flex: 1;
  width: 1px;
  background: #CCCCCC;
}

.info-title {
  font-size: 15px;
  line-height: 15px;
  font-family: SourceHanSansSC;
  font-weight: bold;
  color: #333333;
}

.info-title-time {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 400;
  color: #F72323;
}

.info-item {
  margin-top: 12px;
}

.info-item-text {
  margin-left: 11px;
  font-size: 13px;
  font-family: SourceHanSansSC;
  color: #666666;
}
</style>
